<template>
    <div>
        <div class="block">
            <span class="demonstration"></span>

            <el-carousel :interval="4000" type="card">
                <el-carousel-item v-for="item in img_list" :key="item.id">
                    <img :src="item.idView" alt="" />
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="location">
            <h2>热门拍摄地点</h2>
            <el-row type="flex" justify="space-between">
                <el-col v-for="item in imgBox" :key="item.categoryId" :span="6">
                    <div class="div_img">
                        <img class="col_img" :src="item.photo" alt="" />
                    </div>
                    <div class="div_text">
                        <span class="imgBoxName">{{ item.name }}</span>
                    </div>
                </el-col>
            </el-row>

            <!-- 最新发布图片 -->
            <div class="new_photo">
                <hr class="photo_hr" />
                <h2>最新发布图片</h2>
                <el-row class="row2">
                    <el-col
                        :span="6"
                        v-for="(o, index) in newPhoto"
                        :key="index"
                        :offset="index > 0 ? 3.5 : 0"
                    >
                        <el-card
                            class="el_card_class"
                            :body-style="{ padding: '0px' }"
                        >
                            <!-- 图片 -->
                            <div
                                class="photo_div"
                                @click="_openPhotoDetail(o.photoId)"
                            >
                                <img class="photo_img_class" :src="o.link" />
                            </div>
                            <!-- 图片参数 -->
                            <div style="padding: 0px">
                                <div class="photo_title">
                                    {{ o.title }}
                                </div>
                                <div class="photo_icon_div">
                                    <div class="photo_view_icon"></div>
                                    <div class="photo_view_div">
                                        {{ o.viewCounts }}
                                    </div>
                                    <!-- 点赞 -->
                                    <div
                                        class="photo_praise_icon"
                                        @click="
                                            _updateApprovalCountsById(o.photoId)
                                        "
                                    ></div>
                                    <div class="photo_praise_div">
                                        {{ o.approvalCounts }}
                                    </div>
                                </div>
                                <hr class="photo_hr" />
                                <!-- 作者信息 -->
                                <div class="bottom clearfix">
                                    <img
                                        @click="_toDetail(o.userId)"
                                        :src="o.userAvatar"
                                        class="photo_user_avatar"
                                    />
                                    <div class="photo_nick">
                                        {{ o.nick }}
                                    </div>
                                    <div class="photo_publish_time">
                                        {{ o.publishTime }}
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <div class="superior_choose">
                <div class="tabs_div">
                    <el-tabs
                        v-model="activeName"
                        @tab-click="handleClick"
                        :stretch="true"
                    >
                        <el-tab-pane
                            label="精选"
                            name="first"
                            class="tab1"
                        ></el-tab-pane>
                    </el-tabs>
                </div>
                <div
                    class="nature"
                    v-for="bigItem in items"
                    :key="bigItem.name"
                >
                    <div class="nature_header">
                        <h2>{{ bigItem.name }}</h2>
                        <a href="">更多></a>
                        <ul class="nature_ul">
                            <li
                                v-for="(item, index) in ulList"
                                :key="index"
                                :class="{
                                    active: activeId[bigItem.id] === item.id,
                                }"
                                @click="_clickLi(bigItem.id, item.id)"
                            ></li>
                        </ul>
                    </div>
                    <!-- 分类下的图片 -->
                    <transition name="fade">
                        <div v-show="animation">
                            <el-row class="row2">
                                <el-col
                                    :span="6"
                                    v-for="(o, index) in bigItem.data"
                                    :key="index"
                                    :offset="index > 0 ? 3.5 : 0"
                                >
                                    <el-card
                                        class="el_card_class"
                                        :body-style="{ padding: '0px' }"
                                    >
                                        <!-- 图片 -->
                                        <div
                                            class="photo_div"
                                            @click="_openPhotoDetail(o.photoId)"
                                        >
                                            <img
                                                class="photo_img_class"
                                                :src="o.link"
                                            />
                                        </div>
                                        <!-- 图片参数 -->
                                        <div style="padding: 0px">
                                            <div class="photo_title">
                                                {{ o.title }}
                                            </div>
                                            <div class="photo_icon_div">
                                                <div
                                                    class="photo_view_icon"
                                                ></div>
                                                <div class="photo_view_div">
                                                    {{ o.viewCounts }}
                                                </div>
                                                <!-- 点赞 -->
                                                <div
                                                    class="photo_praise_icon"
                                                    @click="
                                                        _updateApprovalCountsById(
                                                            o.photoId
                                                        )
                                                    "
                                                ></div>
                                                <div class="photo_praise_div">
                                                    {{ o.approvalCounts }}
                                                </div>
                                            </div>
                                            <hr class="photo_hr" />
                                            <!-- 作者信息 -->
                                            <div class="bottom clearfix">
                                                <img
                                                    @click="_toDetail(o.userId)"
                                                    :src="o.userAvatar"
                                                    class="photo_user_avatar"
                                                />
                                                <div class="photo_nick">
                                                    {{ o.nick }}
                                                </div>
                                                <div class="photo_publish_time">
                                                    {{ o.publishTime }}
                                                </div>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
        <!-- 图片详情页组件 -->
        <photo-detail
            :dialogVisible="dialogVisible"
            :photoId="photoDetailId"
            @close="_closeDialog"
        />
    </div>
</template>

<script>
import Vue from 'vue';
import imageApi from '../request/imageApi';
import categoryApi from '../request/categoryApi';
import PhotoDetail from '../component/PhotoDetail.vue';
export default {
    components: { PhotoDetail },
    data() {
        return {
            // 精选
            activeName: 'first',
            // 轮播图
            img_list: [],
            // 热门拍摄地点
            imgBox: [],
            // 首页图片展示
            items: [
                {
                    id: 0,
                    name: '自然',
                    data: [],
                },
                {
                    id: 1,
                    name: '运动',
                    data: [],
                },
                {
                    id: 2,
                    name: '城市',
                    data: [],
                },
                {
                    id: 3,
                    name: '人物',
                    data: [],
                },
                {
                    id: 4,
                    name: '签约摄影师',
                    data: [],
                },
            ],
            // 高亮数组
            activeId: [1, 1, 1, 1, 1],
            // ul数组
            ulList: [
                {
                    id: 1,
                },
                {
                    id: 2,
                },
            ],
            // 动画
            animation: true,
            // 最新图片
            newPhoto: [],

            // 图片详情页
            // 图片详情页是否打开
            dialogVisible: false,
            // 图片详情页id
            photoDetailId: 0,
        };
    },
    methods: {
        handleClick() {},
        // 获取轮播图
        _getShuffling() {
            imageApi.getShuffling().then((res) => {
                this.img_list = res.data;
            });
        },
        // 分页跳转图片
        _clickLi(arrayId, id) {
            // 在v-for中使用数组的下标，需要使用Vue.set()方法
            this.animation = false;
            Vue.set(this.activeId, arrayId, id);
            this.activeId.splice(arrayId, 1, id);
            // 通过分类名字获取分类id
            categoryApi.getCategoryId(this.items[arrayId].name).then((res) => {
                // 通过分类id获取图片
                imageApi.getPhotos(res.data, id).then((res) => {
                    this.items[arrayId].data = res.data.list;
                    this.animation = true;
                });
            });
        },
        // 获取热门拍摄地点
        _getImgList(name) {
            imageApi.getImgBox(name).then((res) => {
                this.imgBox = res.data;
            });
        },
        // 获取首页图片
        _getHomeImg() {
            let params = ['自然', '运动', '城市', '人物', '签约摄影师'];
            imageApi.getHomeImg(params).then((res) => {
                res.data.map((item, index) => {
                    this.items[index].pageSize = item.pageSize;
                    this.items[index].data = item.list;
                });
            });
        },
        // 图片详情页
        _openPhotoDetail(id) {
            this.dialogVisible = true;
            this.photoDetailId = id;
        },
        // 获取最新图片
        _getNewPhoto() {
            imageApi.getNewPhoto().then((res) => {
                this.newPhoto = res.data;
            });
        },
        // 前往个人详情页面
        _toDetail(id) {
            if (id === this.$store.state.userId) {
                this.$router.push('/personal');
                return;
            }
            this.$router.push({
                path: '/user/' + id,
            });
        },
        // 点赞
        _updateApprovalCountsById(photoId) {
            if (!window.sessionStorage.getItem('token')) {
                this.$message.info('请先登录');
                return;
            }
            let data = {
                photoId: photoId,
            };
            imageApi.updateApprovalCountsById(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('点赞成功');
                    // 过滤器根据id更新点赞数
                    this._getHomeImg();
                    this._getNewPhoto();
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 首次执行方法
        _initHome() {
            // 获取热门拍摄地点
            this._getImgList('热门拍摄地点');
            // 获取首页图片
            this._getHomeImg();
            // 改变标签高亮状态
            this.$store.commit('changeSelectState', 0);
            // 获取轮播图
            this._getShuffling();
            // 获取最新图片
            this._getNewPhoto();
        },
        // 关闭详情页
        _closeDialog() {
            this.dialogVisible = false;
            this._initHome();
        },
    },
    created() {
        this._initHome();
    },
};
</script>

<style scoped>
.block img {
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: inherit;
}
.block {
    width: 100%;
    height: 300px;
    display: block;
    padding: 50px 0;
}
.el-carousel {
    margin: 0 0.75%;
    width: 78.5%;
    height: 50%;
    left: 10%;
    position: absolute;
}

.location {
    float: left;
    width: 80%;
    left: 10%;
    height: 250px;
    position: absolute;
}
.location h2 {
    margin-left: 1.25%;
}
.div_img {
    position: relative;
    height: 150px;
    margin-left: 10%;
    width: 80%;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
}
.col_img {
    height: 100%;
    width: 100%;
    transition: all 0.5s;
}
.col_img:hover {
    transform: scale(1.1);
}
.div_text {
    margin-left: 15%;
    width: 70%;
    text-align: center;
    margin-top: 9px;
}
/* 最新图片div */
.new_photo {
    width: 100%;
    height: 300px;
    display: block;
    padding: 50px 0;
}
.imgBoxName {
    font-size: 15px;
}
.superior_choose {
    margin-left: 1.1%;
    width: 98%;
    top: 300%;
    position: absolute;
}
.tabs_div {
    top: 74px;
    position: sticky;
    background-color: #fff;
    z-index: 999;
}
.superior_choose image {
    width: 100%;
    display: block;
}
.superior_choose .bottom {
    margin-top: 13px;
    line-height: 12px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
.el-card {
    width: 74%;
}
.row2 {
    width: 100%;
}
::v-deep .el-tabs__nav-scroll {
    width: 10%;
    margin: 0 auto;
}
.nature_header {
    height: 100px;
}
.nature_ul {
    list-style: none;
    float: right;
    width: 100px;
    margin-right: 50px;
    list-style: square;
    color: rgb(166, 162, 162);
    margin-top: 30px;
}
.nature_ul li {
    float: left;
    width: 0px;
    margin-left: 25px;
    cursor: pointer;
    font-size: 30px;
}
.nature a {
    float: right;
    margin-top: 40px;
    text-decoration-line: none;
}
.nature h2 {
    float: left;
    margin-top: 30px;
}
.active {
    color: deepskyblue !important;
}
.el_card_class {
    margin: 0 auto;
    width: 90%;
}
/* 图片模块样式 */
.photo_div {
    cursor: pointer;
    width: 100%;
    height: 210px;
}
.photo_img_class {
    width: 100%;
    height: 100%;
    display: block;
}
.photo_title {
    margin: 5px auto;
    padding-left: 10px;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
}
.photo_icon_div {
    width: 100%;
    padding-top: 4px;
    height: 20px;
}
.photo_icon_div div {
    float: left;
    margin-left: 10px;
}
.photo_praise_icon {
    cursor: pointer;
    background: url(../assets/fonts/点赞.png) no-repeat;
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
}
.photo_view_icon {
    background: url(../assets/fonts/观看.png) no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
}
.photo_hr {
    width: 96%;
    height: 1px;
    background-color: #e6e6e6;
}
.photo_user_avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin: 0px 10px 10px;
    border-radius: 50%;
    float: left;
}
.photo_nick {
    float: left;
    margin-top: 10px;
    font-size: 12px;
}
.photo_publish_time {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 12px;
}

/* 过度动画必须 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>